<template>
    <div>
         <h1>添加门店</h1>
         {{ info }}
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">门店名称</td>
                    <td><input type="text" v-model="info.shopName"></td>
                </tr>
                <tr>
                    <td align="right">分店名称</td>
                    <td><input type="text" v-model="info.branchName"></td>
                </tr>
                 <tr>
                    <td align="right">门店图片</td>
                    <td><input type="file" @change="img" >
                    <img :src="info.photo" width="100" height="100" v-if="info.photo!=''">
                    </td>
                </tr>
                <tr>
                    <td align="right">开业时间</td>
                    <td><input type="date" v-model="info.openTime"></td>
                </tr>
                <tr>
                    <td align="right">是否启用</td>
                    <td>
                    <input type="radio" name="state" v-model="info.state" :value="true">是
                    <input type="radio" name="state" v-model="info.state" :value="false">否
                </td>
                </tr>
                <tr>
                    <td align="right">门店特色</td>
                    <td>
                    <input type="checkbox" name="tese" v-model="info.teSe" value="婚宴">婚宴
                    <input type="checkbox" name="tese" v-model="info.teSe" value="升学宴" >升学宴
                    <input type="checkbox" name="tese" v-model="info.teSe" value="订婚宴">订婚宴
                    <input type="checkbox" name="tese" v-model="info.teSe" value="生日宴">生日宴
                 </td>
                </tr>
                <tr>
                    <td align="right">联系电话</td>
                    <td><input type="text" v-model="info.tel">
                    
                    </td>
                </tr>
                <tr>
                    <td align="right">门店介绍</td>
                    <td>
                    <textarea rows="5" cols="50" v-model="info.desc" ></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">门店地址</td>
                    <td><select v-model="info.addressId">
                        <option value="">请选择</option>
                        <option :value="item.addressId" v-for="item in levelList">{{ item.addressName}}</option>
                    </select></td>
                </tr>
                <tr>
                    <td align="right">门店类型</td>
                    <td>
                    <select v-model="info.shopType">
                        <option value="">请选择</option>
                        <option value="普通酒店">普通酒店</option>
                        <option value="豪华酒店">豪华酒店</option>
                        <option value="竞技酒店">竞技酒店</option>
                    </select>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td><input type="button" value="提交" @click="add" ></td>
                </tr>
            </tbody>
        </table>
      
    </div>
</template>

<script setup lang="ts">
import axios from "axios";
import {ref,reactive,onMounted} from "vue";
import {useRoute,useRouter} from "vue-router";
onMounted(()=>
{
    bind();
})
let router=useRouter();
let route=useRoute();
let levelList:any=ref([]);

const bind=()=>
{
    axios({
        url:'/api/Shop/Bind',
        method:"get"
    })
    .then((res)=>
    {
        console.log(res);
        levelList.value=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
let info:any=reactive({
  
  "shopName": "",
  "branchName": "",
  "photo": "",
  "openTime": "",
  "state": true,
  "teSe": [],
  "tel": "",
  "desc": "",
  "addressId": "",
  "shopType": ""
})
const add=()=>
{
    info.teSe=info.teSe.toString();
    axios({
        url:'/api/Shop/AddShop',
        method:"post",
        data:info
    })
    .then((res)=>
    {
        console.log(res);
        if(res.data==-1)
        {
            alert("门店已存在");
            return;
        }
        if(res.data>0)
        {
            alert("添加成功");
            router.push("/shopShow");
            return;
        }
        else
        {
            alert("添加失败");
            return;
        }
    })
    .catch((err)=>
    {
        console.log(err);
    })
}

//前端图片上传
const img=(e:any)=>
{
    //e.表示事件对象 只要触发事件就会存在事件对象
    //获取上传的文件
    var obj =e.target.files[0];
    //将上传的文件转成FormData();//创建空的表单对象
    let f=new FormData();
    //发送网络请求实现图片上传
    f.append('file',obj);
    axios({
        url:'/api/Upload/Img',
        method:"post",
        data:f
    })
    .then((res)=>
    {
        console.log(res);
       if(res.data=="不是图片")
        {
            alert("您选择的不是图片");
            return;
        }
        if(res.data=="大于2M")
        {
            alert("您选择的图片大于2M");
            return;
        }
       info.photo=res.data;
    })
    .catch((err)=>
    {
        console.log(err);
    })
}
</script>

<style scoped>

</style>